import React, { useState, useEffect } from 'react';

// 获取屏幕大小
function useWinSize() {
    // 开始设置常量
    const [size, setsize] = useState({
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    })
    // 设置修改的方法
    const changeSize = () => {
        setsize({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        })
    }
    // 在声明周期里面开始的时候进行监听
    useEffect(() => {
        window.addEventListener('resize', changeSize)
        return () => {
            // 销毁阶段把监听remove
            window.removeEventListener('resize', changeSize)
        }
    }, [])
    return size
}



function Custom() {
    const winSize = useWinSize()
    return (
        <div>{winSize.width}*{winSize.height}</div>
    )
}

export default Custom